<template>
  <div class="wendnag">
    <van-nav-bar title="用户帮助" left-text="我的" left-arrow @click-left="$router.push('/user/userinfo')" fixed />
    
    <div class="main">
      <h1>用户问题解答文档</h1>
      <div class="question">
      <div class="faq-section">
        <div class="faq-item">
          <h3>1. 拍照监督</h3>
          <div class="question-answer">
            <p class="question">问：如何使用拍照监督功能？</p>
            <p class="answer">答：用户可以在“监督”页面选择“拍照监督”，拍摄不文明停车的车辆照片，上传时可添加描述信息。上传后，照片会被记录并可供其他用户查看。</p>
          </div>
          <div class="question-answer">
            <p class="question">问：我上传的照片会被谁看到？</p>
            <p class="answer">答：上传的照片会对所有用户可见，以便促进相互监督和提醒。</p>
          </div>
        </div>
        <div class="faq-item">
    <h3>2. 挪车</h3>
    <div class="question-answer">
        <p class="question">问：挪车通知会如何发送？</p>
        <p class="answer">答：用户可以在发现不文明停车后选择“挪车”，系统会自动生成通知，通过APP发送给相关车辆的车主。</p>
    </div>
        </div> 
        <div class="faq-item">
    <h3>3. 商城积分兑换奖励</h3>
    <div class="question-answer">
        <p class="question">  问：如何查看我的积分余额？</p>
        <p class="answer">
          答：用户可以在“个人中心”查看当前的积分余额和历史积分记录。</p>
    </div>
        </div> 
        <div class="faq-item">
    <h3>4.商城</h3>
    <div class="question-answer">
        <p class="question">问：商城有哪些奖励可以兑换？</p>
        <p class="answer">
          答：商城提供多种奖励，包括停车券、礼品卡、优惠券等，具体可在商城页面查看。</p>
    </div>
        </div> 
        <div class="faq-item">
    <h3>5.充值积分</h3>
    <div class="question-answer">
        <p class="question">问：积分充值的费用是如何计算的？</p>
        <p class="answer">答：积分充值费用根据所选的积分数量而定，具体充值页面会显示详细费用。</p>
    </div>
        </div> 
        <div class="faq-item">
    <h3>6.修改个人信息</h3>
    <div class="question-answer">
        <p class="question">问：修改个人信息后需要重新验证吗？</p>
        <p class="answer">答：大部分情况下，修改信息后不需要重新验证，但部分重要信息（如手机号码）可能需要验证。</p>
    </div>
        </div> 
        <div class="faq-item">
    <h3>7. 查看当前和历史订单</h3>
    <div class="question-answer">
        <p class="question"> 问：如何查询某个特定订单的状态？</p>
        <p class="answer">答：在“订单管理”页面，快速查询特定订单状态。</p>
    </div>
        </div> 
        <div class="faq-item">
    <h3>8. 数据使用</h3>
    <div class="question-answer">
        <p class="question"> 问：用户数据如何被使用？</p>
        <p class="answer"> 答：数据用于分析用户行为、改进软件功能及提供个性化服务，确保用户获得最佳体验。</p>
    </div>
        </div> 
        <div class="faq-item">
    <h3>9. 数据安全</h3>
    <div class="question-answer">
        <p class="question"> 问：如何保护我的数据安全？</p>
        <p class="answer">答：我们采用数据加密、访问控制和定期安全审查等多重措施，确保用户数据的安全。</p>
    </div>
        </div> 
      </div>
    </div>
   
  </div>
  <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home" replace to="/home/home">主页</van-tabbar-item>
      <van-tabbar-item icon="comment" replace to="/message/contactreinfo" dot>消息</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart" replace to="/shop/shop">商店</van-tabbar-item>
      <van-tabbar-item icon="friends" replace to="/user/userinfo">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
// 导入依赖
import { POST, GET } from "../../tools/fetch";
import { userApi, baseURL } from '../../tools/api.js';
// 路由相关的，允许你用js控制路由，跳转组件一点就的走，但是此时控制了，不是直接点了就跳转，需要js控制允许控制转向其他路由
//  控制路由（走的时候）访问路由（来的时候）
// import {useRouter,useRoute} from 'vue-router';
import { useRouter } from 'vue-router';
const router = useRouter();
// token
import { useUserStore } from '../../tools/storage.js';
// 初始化
const userStore = useUserStore();
const URL = baseURL;

const dataSource = ref({
    list: []
})

// 页面加载时调用
const onLoad = async () => {
    const resResult = await GET({
        api: userApi.player
    })
    console.log(resResult);
    dataSource.value.list = resResult.data
}
onLoad()

</script>

<style lang="less" scoped>
 .main {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start; 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 15vw; 
}

  .main h1{
    font-size: 6vw;
    text-align: center;
  }
  .question{
    font-size: 4vw;
  }
</style>
